View Modifiers create new Parent View and place modified View inside it as its Child (they do not modify existing View).

This way they also create a Hierarchy of Views (like Container Views) but every Parent has only one Child.

.frame Modifier's alignment parameter allows you to control position of its Child View (otherwise Child is centered).

And its width and height parameters allow you to control perceived size of its Child View.

.animation Defines how to animate the View when it is redrawn after its Properties change

.animation(Animation.linear(duration:5).delay(2)) //linear, easeOut, easeIn, easeInOut

.background Defines View Background as Color or Image

.background(Image("Table"))

.background(Color.blue)

.background(Color(red: 1, green: 0, blue: 0, opacity: 0.5))

.background(Color(hue: 0, saturation: 0.66, brightness: 0.66, opacity: 1))

.bold Changes text formatting to Bold

.bold()

.border Adds Border to a View

.border(Color.red, width: 2)

.clipped Removes content of Child View that is outside of the Parent's View

.clipped()

.cornerRadius Creates Background with rounded corners

.cornerRadius(18.0)

.edgesIgnoringSafeArea Allows View to take up space above the Safe Area

.edgesIgnoringSafeArea(.all) //all, horizontal, vertical, top, bottom, leading, trailing

.font Defines Font Family & size

.font(.largeTitle)

.font(system(size: 72))

.font(Font.custom("Arial Rounded MT Bold", size: 18).weight(.black))

.fontWeight Defines Font thickness

.fontWeight(.bold) //ultraLight, thin, light, regular, medium, semibold, bold, heavy, black

.foregroundColor Defines Font Color

.foregroundColor(Color.red)

.foregroundColor(Color(red: 1, green: 0, blue: 0, opacity: 0.5))

.foregroundColor(Color(hue: 0, saturation: 0.66, brightness: 0.66, opacity: 1))

.frame Positions View inside newly created invisible container View

.frame(width: 0, minHeight: 0, maxHeight: .infinity, alignment: .bottom)

.gesture Allows View to react to Gestures

.gesture( TapGesture ().onEnded { print("TAP" ) } )

.gesture( LongPressGesture ().onEnded { par in print("Event ended = \(par)") } )

.gesture( DragGesture ().onEnded { par in print("Value = \(par)") } )

.gesture( MagnificationGesture().onEnded { par in print("Magnification = \(par)") } )

.italic Changes text to Italic

.italic()

.mask Displays a secondary View in front of the Parent View masking Parent's content

.mask(Text("SWIFT").font(Font.system(size: 72).weight(.black)).frame(alignment: .center).border(Color.red,

width: 50))

.offset Moves View from its default position

.offset(x: 20, y: 15) //CGFloat

.onLongPressGesture Allows View to react when User holds finger on top of it

.onLongPressGesture(minimumDuration: 1, maximumDistance: 1) { print("Event ended") }

.onTapGesture Allows View to react to Tapping

.onTapGesture { print("TAP") }

.overlay Displays a secondary view in front of the Parent View

.overlay(Image("BlueBubble").resizable())

.padding Defines additional space around the View between this View and neighboring child Views

.padding()

.padding(100)

.padding(.top, 100) //top, bottom, leading, trailing, vertical, horizonatl

.scaleEffect Lets you increase or decrease the size of a View

.scaleEffect(5) //The same scaling in both directions

.scaleEffect(x: 1, y: 5) //Different scaling in each direction

.scaleEffect(2, anchor: .bottomTrailing) //Specifiy from where to do scaling

.scaleEffect(isPressed ? 0.5 : 1.0)

.shadow Adds shadow to the text

.shadow(color: Color.black, radius: 2, x: 2, y: 2)

.tracking Changes space between characters

.tracking(5) //Increase space between characters

.tracking(-0.8) //Decrease space between characters

.transition Defines how to add or remove the View from Hierarchy

.transition(AnyTransition.slide)

.transition(AnyTransition.move(edge: .top)) //top, bottom, leading, trailing

.transition(AnyTransition.offset(x: 100, y: 100))

.transition(AnyTransition.opacity)

.transition(AnyTransition.scale(scale: 10))

.underline Underlines text with different colors

.underline()

.underline(true, color: Color.red)